<template>
  <div id="app">
    <div class="container">
      <h1>团建活动组织管理系统</h1>
      
      <div class="search-box">
        <el-input
          v-model="searchText"
          placeholder="小组名称"
          style="width: 200px"
        ></el-input>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>

      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="groupName" label="小组名称"></el-table-column>
        <el-table-column prop="memberCount" label="成员数量" width="100"></el-table-column>
        <el-table-column prop="score" label="积分" width="100"></el-table-column>
        <el-table-column prop="slogan" label="口号"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      

      <!-- 编辑对话框 -->
      <el-dialog title="编辑团队信息" :visible.sync="dialogVisible" width="50%">
        <el-form :model="editForm" label-width="100px">
          <el-form-item label="小组名称">
            <el-input v-model="editForm.groupName"></el-input>
          </el-form-item>
          <el-form-item label="成员数量">
            <el-input-number v-model="editForm.memberCount" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="积分">
            <el-input-number v-model="editForm.score" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="口号">
            <el-input v-model="editForm.slogan" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import teamApi from './api/team'

export default {
  name: 'App',
  data() {
    return {
      searchText: '',
      tableData: [],
      loading: false,
      dialogVisible: false,
      editForm: {
        id: null,
        groupName: '',
        memberCount: 1,
        score: 0,
        slogan: ''
      }
    }
  },
  created() {
    this.fetchTeams()
  },
  methods: {
    // 获取团队列表
    async fetchTeams() {
      try {
        this.loading = true
        const response = await teamApi.getTeams()
        console.log('后端返回的数据:', response)
        
        this.tableData = Array.isArray(response) 
          ? response.map(item => ({
              id: item.id,
              groupName: item.name,
              memberCount: item.integral,
              score: item.num,
              slogan: item.slogan
            }))
          : response.map(item => ({
              id: item.id,
              groupName: item.name,
              memberCount: item.integral,
              score: item.num,
              slogan: item.slogan
            }))
      } catch (error) {
        this.$message.error('获取团队列表失败')
        console.error('获取团队列表失败:', error)
      } finally {
        this.loading = false
      }
    },

    // 搜索功能
    async handleSearch() {
      if (!this.searchText.trim()) {
        return this.fetchTeams()
      }
      
      try {
        this.loading = true
        const response = await teamApi.searchTeams(this.searchText)
        this.tableData = response.data
      } catch (error) {
        this.$message.error('搜索失败')
        console.error('搜索失败:', error)
      } finally {
        this.loading = false
      }
    },

    // 打开编辑对话框
    handleEdit(row) {
      this.editForm = { ...row }
      this.dialogVisible = true
    },

    // 提交编辑
    async submitEdit() {
      try {
        await teamApi.updateTeam(this.editForm.id, this.editForm)
        this.$message.success('更新成功')
        this.dialogVisible = false
        await this.fetchTeams() // 刷新列表
      } catch (error) {
        this.$message.error('更新失败')
        console.error('更新失败:', error)
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.container {
  width: 90%;
  margin: 20px auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.search-box {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.el-table {
  margin-top: 20px;
}
</style>
